<template>
  <q-layout view="lHh Lpr lFf">
<!--    q-header 的颜色配置为淡蓝色-->
    <q-header elevated class="bg-primary text-white">
      <q-toolbar>
        <q-btn
          flat
          dense
          round
          icon="menu"
          aria-label="Menu"
          @click="leftDrawerOpen = !leftDrawerOpen"
        />

        <q-toolbar-title class="text-h5 text-weight-bold">
          基于知识图谱的骨干光通信网故障智能诊断系统
        </q-toolbar-title>

        <q-btn-dropdown flat color="white" icon="person">
          <q-list>
            <q-item clickable v-close-popup to="/">
              <q-item-section>
                <q-item-label>登出</q-item-label>
              </q-item-section>
            </q-item>
          </q-list>
        </q-btn-dropdown>
      </q-toolbar>
    </q-header>

    <q-drawer
      v-model="leftDrawerOpen"
      show-if-above
      bordered
      content-class="bg-grey-1"
    >
      <q-img
        class="absolute-top"
        src="https://cdn.quasar.dev/img/material.png"
        style="height: 150px"
      >
        <div class="absolute-bottom bg-transparent">
          <q-avatar size="56px" class="q-mb-sm">
            <img src="https://cdn.quasar.dev/img/boy-avatar.png" />
          </q-avatar>
          <div class="text-weight-bold">{{ userName }}</div>
          <div>@厦门电网</div>
        </div>
      </q-img>
      <q-scroll-area
        style="
          height: calc(100% - 150px);
          margin-top: 150px;
          border-right: 1px solid #ddd;
        "
      >

      <q-list>
        <q-item-label
          header
          class="text-grey-8"
        >
        </q-item-label>
        <q-item clickable v-ripple to="/dataimport">
          <q-item-section avatar>
            <q-icon name="cloud_upload" />
          </q-item-section>
          <q-item-section> 数据导入与查询 </q-item-section>
        </q-item>

          <q-item clickable v-ripple to="/esImport">
            <q-item-section avatar>
              <q-icon name="info" />
            </q-item-section>
            <q-item-section> 光路光缆信息整合 </q-item-section>
          </q-item>

          <q-item clickable v-ripple to="/known">
            <q-item-section avatar>
              <q-icon name="settings" />
            </q-item-section>
            <q-item-section> 知识图谱 </q-item-section>
          </q-item>

          <q-item clickable v-ripple to="/gas">
            <q-item-section avatar>
              <q-icon name="map" />
            </q-item-section>
            <q-item-section> 地图预警 </q-item-section>
          </q-item>
          <q-item clickable v-ripple to="/esAna">
            <q-item-section avatar>
              <q-icon name="fas fa-cogs"  size="1.5em" color="black"/>
            </q-item-section>
            <q-item-section> 故障原因诊断模块 </q-item-section>
          </q-item>
          <q-item clickable v-ripple to="/faultResultQuery">
            <q-item-section avatar>
              <q-icon name="fas fa-table"  size="1.5em" color="black"/>
            </q-item-section>
            <q-item-section> 影响范围预警 </q-item-section>
          </q-item>
          <!-- <q-item clickable v-ripple to="/index5">
            <q-item-section avatar>
              <q-icon name="history" />
            </q-item-section>
            <q-item-section> 历史结果查询 </q-item-section>
          </q-item> -->
      </q-list>

      </q-scroll-area>
    </q-drawer>

    <q-page-container>

          <router-view />

    </q-page-container>
  </q-layout>
</template>

<script>

const linksData = [
  {
    title: 'Docs',
    caption: 'quasar.dev',
    icon: 'school',
    link: '/#/index'
  },
  {
    title: 'Github',
    caption: 'github.com/quasarframework',
    icon: 'code',
    link: 'https://github.com/quasarframework'
  },
  {
    title: 'Discord Chat Channel',
    caption: 'chat.quasar.dev',
    icon: 'chat',
    link: 'https://chat.quasar.dev'
  },
  {
    title: 'Forum',
    caption: 'forum.quasar.dev',
    icon: 'record_voice_over',
    link: 'https://forum.quasar.dev'
  },
  {
    title: 'Twitter',
    caption: '@quasarframework',
    icon: 'rss_feed',
    link: 'https://twitter.quasar.dev'
  },
  {
    title: 'Facebook',
    caption: '@QuasarFramework',
    icon: 'public',
    link: 'https://facebook.quasar.dev'
  },
  {
    title: 'Quasar Awesome',
    caption: 'Community Quasar projects',
    icon: 'favorite',
    link: 'https://awesome.quasar.dev'
  }
]

export default {
  name: 'MainLayout',
  components: {
  },
  data () {
    return {
      leftDrawerOpen: false,
      essentialLinks: linksData,
      userName: '李仕凯'
    }
  },
  mounted () {
    this.userName = localStorage.getItem('userName')
  }
}
</script>



